<template>
<div>
<div id="DiskChart" :style="{width: '270px', height: '270px'}"></div>
<span>{{(diskinfo.used/1024/1024/1024).toFixed(2)}}/{{(diskinfo.total/1024/1024/1024).toFixed(2)}}(GB)</span>
</div>
</template>
<script>
export default {
  name: 'disk',
  props:{
    diskinfo:{
      type: Object,
      default: function(){
        return {
        percent:49,
        used:0,
        total:0,
      }
      }
    }},
  data () {
    return {
    //   diskinfo:{
    //       percent:49,
    //       used:0,
    //       total:0,
    //   },
      myChart:{},
      option:{
            title: {
                text: '磁盘空间',
                left: 'center'
            },
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                    name: 'mem',
                    type: 'gauge',
                    detail: {formatter: '{value}%'},
                    data: [{value: 49, name: '使用率'}]
                }
            ]
        },
    }
  },
  mounted(){
    this.draw();
  },

  methods: {
    draw(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('DiskChart'))
        // 绘制图表
        myChart.setOption(this.option);
         this.myChart = myChart
       
    },

    getnewdata(){
       if(typeof(this.diskinfo.percent) !== "undefined"){
        this.option.series[0].data[0].value = this.diskinfo.percent.toFixed(2);
        this.myChart.setOption(this.option, true);
       }
    }


  }
}
</script>